<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <router-view />
      </v-container>
    </v-main>

    <v-footer color="transparent">
      <v-container fluid class="d-flex pb-10 pl-5">
        <v-hover v-slot:default="{ hover }">
          <v-expand-transition>
            <v-btn class="mx-2" fab dark color="#00c9b7" to="home" :class="{ 'on-hover': hover }">
              <v-icon dark>mdi-home</v-icon>
            </v-btn>
          </v-expand-transition>
        </v-hover>
        <v-hover v-slot:default="{ hover }">
          <v-expand-transition>
            <v-btn class="mx-2" fab dark color="#845ec2" to="player" :class="{ 'on-hover': hover }">
              <v-icon dark>mdi-account-group</v-icon>
            </v-btn>
          </v-expand-transition>
        </v-hover>
      </v-container>
    </v-footer>
  </v-app>
</template>

<script>
import { Vue, Component } from "vue-property-decorator";
@Component
export default class App extends Vue {}
</script>
<style lang="scss">
#app {
  background-image: linear-gradient(
    to right top,
    #6d327c,
    #485da6,
    #00a1ba,
    #00bf98,
    #36c486
  );

  a {
    text-decoration: none;
  }
  .mx-2 {
    position: relative;
    top: 0;
    transition: top 0.33s ease-in-out;
  }
  .on-hover {
    top: -10px;
  }
}
</style>
